<!DOCTYPE html>
<html>
<head lang="en">
    <title>搜索</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/area.js"></script>
    <style>
        .header3 .left{float: left;width: 40px;text-align: center;font-size: 14px;}
        .header3 .left a{display: block;}
        .header3 .left a i{font-size: 22px;color: #fff;}
        .header3 .center{position: absolute;z-index: 999;left: 40px;top: 7px;right: 70px;border-radius: 5px;height: 36px;background-color: #fff;}
        .header3 .center .search-type{float: left;padding-left: 10px;width: 50px;line-height: 36px;font-size: 12px;color: #b8b6b9;overflow: hidden;}
        .header3 .center .search-type span{float: left;}
        .header3 .center .search-type i{float: left;font-size: 14px;}
        .header3 .center .search-input{position: absolute;left: 50px;top: 0;right: 40px;bottom: 0;}
        .header3 .center .search-input input{display: block;height: 36px;line-height: normal;color: #333;font-size: 14px;}
        .header3 .center .input-close{display: none;float: right;width: 30px;line-height: 34px;color: #b8b6b9;}
        .header3 .center .input-close i{font-size: 18px;}
        .header3 .center .choose-type{display: none;position: absolute;left: 0;top: 36px;background-color: #fff;box-shadow: 0 0 10px #e1e1e1;}
        .header3 .center .choose-type ul li{color: #333;position: relative;line-height: 40px;width: 130px;}
        .header3 .center .choose-type ul li i{color: #ffc10c;margin-left: 10px;margin-right: 5px;font-size: 20px;}
        .header3 .right{float: right;width: 70px;text-align: center;}
        .header3 .right .search-btn{width: 50px;margin-left: 10px;background-color: #fff;color: #ffc10c;
            height: 36px;margin-top: 7px;line-height: 36px;border: none;border-radius: 5px;font-size: 14px;-webkit-appearance: none;}

        .content{}
        .search-condition{display: block;box-shadow: 0 4px 4px rgba(165, 165, 165, 0.31);}
        .search-condition .service{position: relative;}
        .search-condition .service p{padding-left: 4%;line-height: 40px;}
        .search-condition .service ul{overflow: hidden;padding: 0 3%;}
        .search-condition .service ul li{float: left;width: 23%;margin: 0 1% 8px;line-height: 30px;background-color: #efefef;
            font-size: 14px;text-align: center;}
        .search-condition .sex{position: relative;}
        .search-condition .sex p{padding-left: 4%;line-height: 40px;}
        .search-condition .sex ul{overflow: hidden;padding: 0 3%;}
        .search-condition .sex ul li{float: left;width: 23%;margin: 0 1% 8px;line-height: 30px;background-color: #efefef;
            font-size: 14px;text-align: center;}

        .select ul li{position: relative;line-height: 30px;padding: 10px 12px;overflow: hidden;}
        .select ul li .left{float: left;color: #8f8f94;width: 25%;box-sizing: border-box;}
        .select ul li .left span{display: block;width: 100%;text-align: justify;font-size: 14px;}
        .select ul li .right{float: right;color: #333;width: 75%;position: relative;font-size: 14px;}
        .select ul .price{overflow: hidden;padding-left: 10px;}
        .select ul .price label{float: left;width: 60%;}
        .select ul .price span{float: right;width: 40%;text-align: right;}
        .select ul li .right .sex{padding-left: 3%;}
        .select ul li .right .sex span{display: inline-block;background-color: #EFEFEF;width: 30%;
            text-align: center;font-size: 14px;line-height: 24px;}
        .select ul li .time input{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;border: none;outline: none;background-color: transparent;}
        .select ul li .time span{float: right;color: #666;}
        .select ul li .right .area{padding-left: 3%;}
        .select ul li .right .area select{width: 30%;font-size: 13px;line-height: 24px;border: none;background-color: #EFEFEF;}


        .btn{padding-bottom: 25px;}
        .btn .reset{width: 40px;border: 1px solid #ffc10c;color: #ffc10c;font-size: 12px;padding: 5px;
            text-align: center;border-radius: 3px;margin: 30px auto 15px;}
        .btn .sure{width: 70%;line-height: 30px;color: #fff;background-color: #ffc10c;text-align: center;border-radius: 3px;
            margin-left: 15%;}

    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header3">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">
                <div class="search-type">
                    <span>租人</span>
                    <i class="iconfont icon-arrowdown"></i>
                </div>
                <label class="search-input">
                    <input type="text"/>
                </label>
                <div class="input-close">
                    <i class="iconfont icon-iconfontclose2"></i>
                </div>
                <!--搜索类型选择-->
                <div class="choose-type">
                    <ul>
                        <li class="bottom-line">
                            <i class="iconfont">&#xe62e;</i><span>租人</span>
                        </li>
                        <li>
                            <i class="iconfont icon-renwu"></i><span>任务</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="search-btn">搜索</div>
            </div>
        </div>
    </header>
    <div class="content">
        <div class="search-condition">
            <div class="service bottom-line">
                <p>服务</p>
                <ul>
                    <li>模特</li>
                    <li>丽人</li>
                    <li>摄影</li>
                    <li>设计</li>
                    <li>生活服务</li>
                    <li>语言练习</li>
                    <li>专业咨询</li>
                    <li>影视表演</li>
                </ul>
            </div>
            <div class="sex bottom-line">
                <p>性别</p>
                <ul>
                    <li>男</li>
                    <li>女</li>
                    <li>不限</li>
                </ul>
            </div>
            <div class="select">
                <ul>
                    <li class="bottom-line">
                        <div class="left">
                            <span class="name">时间</span>
                        </div>
                        <div class="right time">
                            <input type="datetime-local"/>
                            <span>请选择<i class="iconfont icon-arrow_right"></i></span>
                        </div>
                    </li>
                    <li class="bottom-line">
                        <div class="left">
                            <span class="name">价格</span>
                        </div>
                        <div class="right price">
                            <label>
                                <input type="number" placeholder="请输入数字" maxlength="5"/>
                            </label>
                            <span>元/小时</span>
                        </div>
                    </li>

                    <li class="bottom-line">
                        <div class="left">
                            <span class="name">地区</span>
                        </div>
                        <div class="right">
                            <label class="area">
                                <select id="s_province" class="prov">
                                    <option value="0">选择省份</option>
                                </select>
                                <select id="s_city" class="city">
                                    <option value="0">选择城市</option>
                                </select>
                                <select id="s_county" class="district">
                                    <option value="0">选择地区</option>
                                </select>
                            </label>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="btn">
                <div class="reset">重置</div>
                <div class="sure">确定</div>
            </div>
        </div>
    </div>
</body>
<script>
    _init_area();
    $('.search-type').click(function(){
        $('.choose-type').slideToggle(200);
    });
    $('.choose-type ul li').click(function(){
        var _type = $(this).find('span').text();
        $('.search-type span').text(_type);
        $('.choose-type').slideToggle(200);
        $('.search-condition').fadeIn();
    });

    $('.search-input input').on('focus',function(){
        var val = $(this).val();
        if(val == '' || val == null){
            $('.input-close').hide()
        }else{
            $('.input-close').show()
        }
    }).on('keyup',function(){
        var val = $(this).val();
        if(val == '' || val == null){
            $('.input-close').hide()
        }else{
            $('.input-close').show()
        }
    });

    $('.input-close').click(function(){
        $('.search-input input').val('');
        $(this).hide()
    });
    $('.service li').click(function(){
        $(this).css('background-color','#FFC10C').siblings().css('background-color','');
    });
    $('.sex li').click(function(){
        $(this).css('background-color','#FFC10C').siblings().css('background-color','');
    });
    $('.reset').click(function(){
        $('.search-condition li').css('background-color','');
    });
    $('.sure').click(function(){
        $('.search-condition').slideUp(300);
    })
</script>
</html>